<template>
	<view>
		<wp-search class="clientRect" :placeholder="$t('publicLang.pleaseEnter')" @clearInput="clearInput"
			@cancelFocus="cancelFocus">
			<block slot="right">
				<view class="search_button" @click="show=true">
					{{$t('goods.filter')}}
				</view>
			</block>
		</wp-search>
		<u-tabs :list="list" :is-scroll="false" active-color="#111111" :current="current" @change="change"></u-tabs>
		<mescroll-item ref="mescrollItem0" :i="0" :tableFrom="tableFrom" :index="current" :list="list"></mescroll-item>
		<mescroll-item ref="mescrollItem1" :i="1" :tableFrom="tableFrom" :index="current" :list="list"></mescroll-item>

		<u-popup v-model="show" mode="right" width="500rpx">
			<view>
				<view class="uni-form-item uni-column" @click="showPicker">
					<view class="title">{{$t('goods.classification')}}</view>
					<view class="select">
						<input class="uni-input" name="input" :disabled="true" v-model="classificationPicker"
							:placeholder="$t('goods.pleaseSelectType')" />
						<i class='iconfont iconarrow-right1'></i>
					</view>
				</view>
			</view>
			<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
				<view class="button">
					<view class="del-button" @click="delClick">{{$t('goods.reset')}}</view>
					<view class="add-button" @click="addClick">{{$t('publicLang.sure')}}</view>
				</view>
			</view>
		</u-popup>
		<lb-picker ref="classificationPicker" zIndex="10076" v-model="value" :props="myProps"
			mode="multiSelector" :dataset="{ name: 'classificationPicker' }" :list="productList" level="3"
			@confirm="handleConfirm">
		</lb-picker>
	</view>
</template>

<script>
	let app = getApp();
	import MescrollItem from "./mescroll-goods-item.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import wpSearch from "@/components/search/search.vue";
	import {
		categoryFrontTree
	} from "@/api/store.js";
	export default {
		mixins: [MescrollMoreMixin],
		components: {
			MescrollItem,
			wpSearch
		},
		data() {
			return {
				myProps: {
					label: 'name',
					value: 'id',
					children: 'child'
				},
				list: [{
						name: this.$t('operate.onTheShelf'), // 上架中
						value: "1",
					},
					{
						name: this.$t('operate.inWarehouse'), // 仓库中
						value: "2",
					},
				],
				current: 0,
				tableFrom: {
					page: 1,
					limit: 20,
					pushZoneId: null,
					keyword: '',
					cids:'',
					zoneId: null,
					zoneProductType: null
				},
				show: false,
				productList: [],
				value:[],
				classificationPicker:'',
				bottomLift: app.globalData.bottomLift,
			}
		},
		onLoad(options) {
			this.tableFrom.pushZoneId = options.pushZoneId
			this.tableFrom.zoneId = options.zoneId
			this.getAllCategory()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.specialAreaProducts') //专区商品
			})
		},
		methods: {
			change(index) {
				this.current = index;
				// this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			clearInput() {
				this.tableFrom.keyword = ''
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			cancelFocus(e) {
				if (e.type === "focus") return
				this.tableFrom.keyword = e.search
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			// 分类列表
			getAllCategory: function() {
				let that = this;
				categoryFrontTree({
					status: 1,
					type: 1,
				}).then((res) => {
					console.info(res.data)
					that.productList = res.data;
				});
			},
			showPicker() {
				this.$refs.classificationPicker.show()
			},
			handleConfirm(e){	
				if (e) {
				  const name = e.dataset.name
				  const label = e.item.map(m => m.name).join('-')
				  if (name && label) {
				    this[name] = label
				  }
				}
			},
			addClick(){
				this.show = false
				this.tableFrom.cids = this.value[2]
				this.$refs.classificationPicker.hide()
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			delClick(){
				this.tableFrom.cids=""
				this.classificationPicker = ''
				this.$refs.classificationPicker.hide()
				this.show = false
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			}
		}
	}
</script>

<style lang="scss">
	.search_button {
		margin-left: 17rpx;
	}

	.uni-form-item {
		padding: 20rpx 30rpx;

		.title {
			padding: 10rpx 0rpx;
			margin-bottom: 10px;
			font-weight: bold;
		}
		.select {
			display: flex;
			background: #f2f2f2;
			justify-content: space-between;
			align-items: center;
		
			.iconfont {
				margin-right: 10rpx;
				color: #999999;
				font-size: 24rpx;
			}
		
			.keyBtn {
				width: 90rpx;
				background: black;
				margin-right: 17rpx;
				text-align: center;
				color: white;
			}
			.uni-input {
				padding: 15rpx 25rpx;
				background: #f2f2f2;
			}
		}
	}
	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding:0 30rpx;
	}
	
	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	
	.add-button {
		width: 100%;
		height: 80rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		
	}
	.del-button{
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1rpx solid #000000;
		margin-right: 40rpx;
	}
</style>
